<template>
  <img ref="imgFrame" style='width:100%;height:100%' alt="" src=""/>
</template>

<script>
import Socket from '@/util/socket'
import {defineComponent, onMounted, ref} from "vue";

export default defineComponent({
  name: 'Home',
  components: {},
  setup() {
    let imageWidth = 0
    let imageHeight = 0
    const imgFrame = ref(null)
    onMounted(() => {
      /* 初始化Socket */
      Socket.connect({
        url: '/grab/service',
        onOpen: () => {
          console.log('onOpen', '连接成功')
        },
        onError: (e) => {
          console.log('onError', e)
        },
        onMessage: (e) => {
          if (typeof (e.data) === 'string') {
            console.log(e.data);
          } else {
            // eslint-disable-next-line no-undef
            imgFrame.value.src = window.URL.createObjectURL(new Blob([e.data], {type: "image/jpg"}));
          }
        },
        onClose: (e) => {
          console.log('onClose', e)
        }
      })
      /* 获取image的宽和高变量 */
      imgFrame.value.onload = () => {
        imageWidth = imgFrame.value.width
        imageHeight = imgFrame.value.height
      }
      /* 当浏览器大小变化时，更新image的宽和高变量 */
      window.onresize = () => {
        imgFrame.value.onload = () => {
          imageWidth = imgFrame.value.width
          imageHeight = imgFrame.value.height
        }
      }
      /* 禁用网页右键 */
      window.document.oncontextmenu = () => {
        return false
      }
      /* 禁用网页拖拽 */
      window.document.ondragstart = () => {
        return false
      }
      /* 禁止鼠标滑过滚动条滚动 */
      window.document.body.onmousewheel = () => {
        return false;
      }
      window.document.body.style.overflow = 'hidden';
      window.document.addEventListener("touchmove", (e) => e.preventDefault(), false);
      /* 键盘按下 */
      window.document.keydown = (e) => {
        Socket.send({
          inputType: 'keydown',
          keyCode: e.which || e.keyCode
        })
        /* 禁用一些快捷键 */
        if (e.ctrlKey && e.keyCode === 65) { //禁用ctrl + a 功能
          return false
        }
        if (e.ctrlKey && e.keyCode === 67) {	//禁用ctrl + c 功能
          return false
        }
        if (e.ctrlKey && e.keyCode === 83) {	//禁用ctrl + s 功能
          return false
        }
        if (e.ctrlKey && e.keyCode === 86) {	//禁用ctrl + v 功能
          return false
        }
      }
      /* 键盘弹起 */
      window.document.onkeyup = (e) => {
        Socket.send({
          inputType: 'keyup',
          keyCode: e.which || e.keyCode
        })
      }
      /* 鼠标按下 */
      window.document.onmousedown = (e) => {
        Socket.send({
          inputType: 'mousedown',
          mouse: e.button,
          clientX: e.clientX,
          clientY: e.clientY,
          imageWidth: imageWidth,
          imageHeight: imageHeight
        })
      }
      /* 鼠标弹起 */
      window.document.onmouseup = (e) => {
        Socket.send({
          inputType: 'mouseup',
          mouse: e.button,
          clientX: e.clientX,
          clientY: e.clientY,
          imageWidth: imageWidth,
          imageHeight: imageHeight
        })
      }
      /* 鼠标移动 */
      window.document.onmousemove = (e) => {
        Socket.send({
          inputType: 'mousemove',
          mouse: e.button,
          clientX: e.clientX,
          clientY: e.clientY,
          imageWidth: imageWidth,
          imageHeight: imageHeight
        })
      }
    });
    return {
      imgFrame
    }
  }
})
</script>
<style>
body {
  margin: 0;
  padding: 0;
}
</style>
